<template>
	<view class="page home-bg">
		<view class="banner">
			<u-swiper :list="list1" :indicator="false" indicatorMode="line" keyName="image" circular class=" " height="47vw" radius="10" @click="getSwiper">
			</u-swiper>
		</view>
				
		<view class="product-wrapper content-p">
			<u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="120">
			</u-skeleton>
			<navigator class="product-item flex-row" :key="i" v-for="(item, i) in productlList"
				:url="`../details/details?id=${item.id}`">
				<view class="left-section flex-col">
					<view class="text-wrapper flex-col">
						<u--image :showLoading="true" :src="item.cover" width="200rpx" height="154rpx" radius="4"
							:fade="true" duration="450" :lazy-load="true" loadingIcon="photo">
						</u--image>
					</view>
				</view>
				<view class="right-group flex-col">
					<view class="flex-row justify-bw">
						<text class="text_8">{{ item.name }}</text>
						<text class="text_10">超{{ item.sales }}人选择</text>
					</view>
					<view class="group_8 flex-row flex justify-between">
						<text class="stime">{{ item.duration }}分钟</text>
					</view>
					<view class="xz" @click.stop="showjishilist(item.id)">选择技师</view>
					
					<view class="group_9 flex-row group_10">
						<view class="left-group flex ane">
							<text class="text_18 price-font"><text class="text_16">￥</text>{{ item.price }}</text>
							<text class="text_22 price-font1 tl"><text class="text_20">￥</text>{{item.original_price}}</text>
							<view style="display:inline-flex;color:#727272" class="text_22 flex ane ">
								<text class="text_14"></text>
							</view>
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<u-overlay :show="show_code" @click="show_code = false">
			<view class="warp">
				<image :src="follow" mode="widthFix" style="width: 550rpx;"></image>
			</view>
		</u-overlay>
		<u-overlay :show="show_q" @click="show_q = false">
			<view class="warp">
				<image :src="couponImg" mode="widthFix" style="width: 550rpx;" @click="getcoupon"></image>
			</view>
		</u-overlay>
		<u-popup :show="jishilist_show" mode="bottom" :round="10" @close="jishilist_popup_close">
			<view style="height: 75vh;overflow-y: scroll;">
				<selectJiShi v-if="jishilist_show"></selectJiShi>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
	import amapchoose from '@/components/amap-choose/amap-choose.vue';
	import base from '@/config/baseUrl';
	import selectJiShi from '@/pages/selectTechnician/selectTechnician.vue';
	export default {
		components: {
			// tmSkeleton,
			amapchoose,
			selectJiShi
		},
		data() {
			return {
				ladImg: 'https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210291824180187349.png',
				base: base,
				show_q: false,
				title: '',
				show: false,
				city: "北京市",
				weather: {
					type: "",
					low: '',
					high: '',
					date: ""
				},
				bgColor: {
					"backgroundImage": "linear-gradient(to right, #31D081,#18B567)"
				},
				list1: [],
				page: 1,
				current: 0,
				total: null,
				productlList: [],
				loading: true,
				src: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png",
				// "113.012546,28.199271"
				latitude: 113.012546,
				longitude: 28.199271,
				initLocation: '',
				is_wxapp: true,
				show_code: false,
				name: '',
				wx_code: '',
				pid: '',
				tpid: '',
				showQuoun: false,
				follow: '',
				couponImg: '',
				is_coupon: 0,
				is_ios: 0,
				jishilist_show: false
			}
		},
		computed: {

		},
		async onLoad(options) {
			//获取机型
			if (uni.getSystemInfoSync().platform == 'ios') {
				// #ifdef APP-PLUS
				this.is_ios = 1
				// #endif
			}


			this.initLocation = `${this.longitude},${this.latitude}`;

			uni.$u.sleep(500).then(() => {
				this.init();
				this.loading = false
			});
			await this.getConfig()
			// 获取当前定位地址
			let address = uni.getStorageSync('address_info');
			if (address) {
				this.city = address.district ? address.district : address.city;
				this.latitude = address.latitude;
				this.longitude = address.longitude;
				this.initLocation = `${this.latitude},${this.longitude}`

			} else {
				// this.getLat();
			}
			this.getInfo()
			if (options.pid) {
				this.show_q = false
				this.show_code = true
				this.showQuoun = true
				uni.setStorageSync('pid', options.pid);

			}
			if (options.tpid) {
				this.show_q = false
				this.show_code = true
				this.showQuoun = true
				uni.setStorageSync('tpid', options.tpid);

			}

		},
		onReady() {
			console.log('/h5/pages/index/index');
			window.location.href='/h5/pages/index/index'
		},
		onShow() {

		},
		methods: {
			updatejishishow(v){				
				this.jishilist_show =v;
			},
			jishilist_popup_close() {
				this.jishilist_show = false;
			},
			getInfo() {
				var new_people = uni.getStorageSync('new_people')
				console.log(new_people)
				if (new_people == 0 && !this.showQuoun && this.is_coupon == 1) {
					this.show_q = true
				} else {
					this.show_q = false
				}
			},
			getcoupon() {
				this.$http.post('api/coupon/newPeopleReceive').then(res => {

					uni.showToast({
						title: "领取成功！"
					})
					this.show_q = false
				}).catch(err => {
					this.show_q = false
				})
			},
			getSwiper(e) {
				if (this.list1[e].url_type == 0) {
					// #ifdef H5
					location.href = this.list1[e].url;
					// #endif
				} else {
					uni.navigateTo({
						url: this.list1[e].url
					})
				}

			},
			async getConfig() {
				await this.$http.post('api/index/shareConfig').then(res => {
					const {
						wx_code,
						name,
						share_title,
						share_content,
						logo,
						follow,
						couponImg,
						is_coupon
					} = res
					this.follow = follow
					this.couponImg = couponImg
					this.is_coupon = is_coupon
					this.wx_code = wx_code
					console.log(this.is_coupon)
					uni.setNavigationBarTitle({
						title: name
					});

				})
			},
			getLat() {
				// uni.showLoading({
				// 	title: "获取位置"
				// })
				uni.getLocation({
					geocode: true,
					success: (res) => {
						uni.hideLoading()
						let {
							latitude,
							longitude,
							address
						} = res;
						this.latitude = latitude;
						this.longitude = longitude;

						this.initLocation = `${this.longitude},${this.latitude}`

						// #ifdef H5
						this.$http.post('api/wechat/getMapAddress', {
							location: `${latitude},${longitude}`
						}).then(res => {
							let {
								ad_info
							} = res.result;
							let {
								location
							} = ad_info;
							ad_info.latitude = location.lat;
							ad_info.longitude = location.lng;
							uni.setStorageSync('address_info', ad_info);
							this.city = ad_info.district ? ad_info.district : ad_info.city;

						})
						return;
						// #endif

						address.longitude = longitude;
						address.latitude = latitude;
						uni.setStorage({
							key: 'address_info',
							data: address,
							success: () => {
								this.city = address.district ? address.district : address.city;

							}
						});
					},
					fail: (err) => {}
				})
			},

			// 获取轮播图
			getBanner() {
				this.$http.post('api/index/index').then(res => {
					this.list1 = res;
				})
			},
			// 获取首页列表数据
			getList() {
				this.$http.post('api/index/cityService', {
					page: this.page,
					orderBy: this.current,
					type: this.is_ios
				}).then(res => {
					let {
						list,
						total
					} = res;
					this.productlList.push(...list);
					this.total = total;
				})
			},
			init() {
				this.getBanner();
				this.getList();
			},
			onClickItem(e) {
				if (this.current !== e) {
					this.current = e;
					this.page = 1;
					this.productlList = [];
					this.total = null;
					this.getList();
				}
			},
			placeChoose(e) {
				let reg = /.+?(省|市|镇|自治区|自治州|县|区)/g;
				let {
					address
				} = e;
				let arr = address.match(reg);
				this.city = arr[1];
				uni.setStorageSync('address_info', Object.assign(e, {
					city: this.city
				}));
				this.show = false;
			},

			changeShow(e) {
				this.show = e;
			},
			showCity() {
				// #ifdef H5
				// 去掉
				this.initLocation = `${this.longitude},${this.latitude}`
				this.show = true;
				return
				// #endif

			},
			showjishilist(jishiid) {
				uni.setStorageSync('order_info', {
					service_id: jishiid,
					spec_id: 0,
					coupon_id: 0
				})
				this.jishilist_show = true;
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.mpvueCityPicker.show();
		},
		onPullDownRefresh() {
			let _self = this
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				this.page = 1;
				this.productlList = [];
				this.total = null;
				this.init();
			}, 1000);
		}

	}
</script>

<style lang="scss">
	.banner{
		padding:10px 10px 0; border-radius: 10px; overflow: hidden;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.home-bg {
		.content-p{
			padding:0 10px;
		}
		.nav-head {

			font-size: 30rpx;
			font-weight: 380;
			display: flex;

			view {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: white;
			}

			.flex {
				flex: 1;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				text {
					flex: 1;
					display: flex;
					justify-content: flex-end;
				}
			}

			.flex_2 {
				flex: 2;
			}
		}
		.product-wrapper {
			margin: 0 0 30rpx 0;
			.product-item {
				padding: 22rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 28rpx;
				margin: 20rpx 0;

				.left-section {
					//padding-top: 140rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					// line-height: 34rpx;
					white-space: nowrap;
					border-radius: 12rpx;
					//background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 200rpx;
					// height: 154rpx;

					.text-wrapper {
						// padding: 13rpx 0 0 0;
						position: relative;

						.text_6 {
							text-align: center;
							width: 216rpx;
							position: absolute;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.36);
							border-radius: 0px 0px 12rpx 12rpx;
							//margin: 0 6rpx;
						}
					}
				}

				.right-group {
					margin-left: 22rpx;
					flex: 1 1 auto;
					display: flex;
					justify-content: space-between;
					position: relative;
					.group_7 {
						margin-top: 8rpx;

						.left-text-wrapper {
							padding: 4rpx 0;
							color: rgb(255, 255, 255);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;
							background-color: rgb(243, 151, 53);
							border-radius: 8rpx;
							width: 104rpx;
							height: 36rpx;
							text-align: center;
						}

						.right-text-wrapper {
							margin-left: 6rpx;
							padding: 2rpx 0;
							color: rgb(243, 151, 53);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;
							border-radius: 8rpx;
							width: 104rpx;
							height: 36rpx;
							border: solid 2rpx rgb(243, 151, 53);
							text-align: center;
						}
					}

					.image_5 {
						width: 24rpx;
						height: 24rpx;
						margin-left: 14rpx;
						margin-right: 3rpx;
					}

					.group_8 {
						// margin-top: 8rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						// line-height: 34rpx;
						white-space: nowrap;
						align-items: center;



						.text_14 {
							margin-left: 4rpx;
						}
						
						.stime{
							min-width: 45px;
							    height: 17px;
							    line-height: 17px;
							    padding: 0 4px;
							    text-align: center;
							    background: linear-gradient(270deg,#4c545a,#282b34);
							    border-radius: 4px;
							    font-size: 10px;
							    color: #ffeeb9;
						}
						
						
					}

					.group_9 {
						// margin-top: 16rpx;
						width: 100%;
						display: flex;

						// justify-content: space-around;
						.left-group {
							// margin-top: 14rpx;
							white-space: nowrap;
							// height: 44rpx;

							.text_16 {
								color: #FF6100;
								font-size: 24rpx;

							}

							.price-font1 {
								font-size: 22rpx;
								color: #ccc;
								margin-left: 8rpx;
							}

							.text_14 {
								font-size: 22rpx;
								color: #727272;
							}

							.text_18 {
								font-family: Price-Bold;
								color: #FF6100;
								font-size: 32rpx;

							}
						}

						.center-group {
							margin-left: 4rpx;
							margin-top: 20rpx;
							position: relative;

							.group_10 {
								line-height: 28rpx;
								white-space: nowrap;

								.text_20 {
									color: rgb(153, 153, 153);
									font-size: 24rpx;
									line-height: 28rpx;
								}

								.text_22 {

									color: rgb(153, 153, 153);
									font-size: 24rpx;
									line-height: 28rpx;
								}
							}

							.divider {
								background-color: rgb(151, 151, 151);
								width: 88rpx;
								height: 2rpx;
								position: absolute;
								left: 2rpx;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}

						.right-text-wrapper_1 {


							margin-left: 40rpx;
							margin-top: 6rpx;
							padding: 4rpx 0 2rpx;
							color: rgb(255, 255, 255);
							font-size: 24rpx;
							line-height: 34rpx;

							background-image: linear-gradient(112.4deg,
									rgb(53, 219, 160) 0%,
									rgb(53, 219, 160) -13.77%,
									rgb(24, 181, 103) 111.69%,
									rgb(24, 181, 103) 100%);
							border-radius: 20rpx;
							width: 128rpx;
							height: 40rpx;
							text-align: center;
						}
					}

					.text_8 {
						color: #333;
						font-size: 30rpx;
						font-weight: 600;
					}

					.text_10 {
						color: #727272;
						font-size: 22rpx;
						line-height: 34rpx;
					}
				}
			}
		}
	}

	.xz {
		width: 156rpx;
		height: 32px;
		// background: #1DD39B;
		background-color: rgb(56, 152, 124);
		border-radius: 12rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 32px;
		text-align: center;
		position: absolute;
		right: 0;
		bottom: 0;
	}
</style>